<template>
  <div style="padding: 10px; height: 100%;">
    <el-form ref="equipmentFireGroupFormRef" :model="form" :rules="rules" label-width="80px" style="min-height: calc(100% - 50px);">
      <el-form-item label="分组名称" prop="fireGroupName">
        <el-input v-model="form.fireGroupName" placeholder="请输入组名称" :maxlength="30" show-word-limit />
      </el-form-item>
      <el-form-item label="备注说明" prop="remark">
        <el-input v-model="form.remark" type="textarea" :autosize="{ minRows: 3 }" :maxlength="120" show-word-limit placeholder="请输入备注说明" />
      </el-form-item>
    </el-form>

    <div style="height: 50px; text-align: center;">
      <el-button :loading="buttonLoading" :disabled="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="emit('close')">取 消</el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { updateequipmentFireGroup, getequipmentFireGroup } from '@/api/security/firefighting/fire-equipment-group';
import { equipmentFireGroupVO, equipmentFireGroupQuery, equipmentFireGroupForm } from '@/api/security/firefighting/fire-equipment-group/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const buttonLoading = ref(false);
const equipmentFireGroupFormRef = ref<ElFormInstance>();

const props = defineProps({
  equipmentFireGroupId: {
    type: String,
    required: true
  }
});
const emit = defineEmits(['close', 'success']);

const data = reactive<any>({
  form: { 
    equipmentFireGroupId: undefined,
    remark: undefined,
    parkInfoId: undefined,
    fireGroupName: undefined
  },
  rules: {
    fireGroupName: [
      { required: true, message: '组名称不能为空', trigger: 'blur' }
    ]
  }
});

const { form, rules } = toRefs(data);

/**
 * 获取详情
 */
const getFireGroupInfo = async () => {
  proxy.$modal.loading('加载中...')
  const res = await getequipmentFireGroup(props.equipmentFireGroupId).finally(() => proxy.$modal.closeLoading());
  Object.assign(form.value, res.data);
}

/** 提交按钮 */
const submitForm = () => {
  equipmentFireGroupFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      await updateequipmentFireGroup(form.value).finally(() => buttonLoading.value = false);

      proxy?.$modal.msgSuccess('操作成功');
      emit('close');
      emit('success');
    }
  });
}

onMounted(async () => {
  await getFireGroupInfo();
});
</script>
  <style lang="scss" scoped>
      :deep(.el-card__header) {
          height: 60px;
      }
      :deep(.el-card__body) {
          height: calc(100% - 60px);
      }
      :deep(.pagination-container) {
          margin-top: 0;
      }
  </style>
